<template>
    <h2>添加菜单</h2>
    <div style="text-align: left; border-bottom: 1px solid gray; padding-bottom: 10px;">
        <el-tree :props="props" :data="menus" node-key="id" @node-click="handleTreeNodeClick" highlight-current="true"
            draggable ref="treeRef" @node-drag-end="dragEnd" :allow-drag="allowDrag">
            <template #default="{ node, data }">
                <span class="custom-tree-node">
                    <span>{{ node.label }}</span>
                    <span>
                        <el-button size="small" type="primary" @click.stop="handleEdit(node, data)">
                            修改
                        </el-button>

                        <el-button size="small" type="danger" @click.stop="handleDelete(node, data)">
                            删除
                        </el-button></span>
                </span>

            </template>
        </el-tree>
        <!-- <el-tree :props="props" :data="treeNodeList" node-key="id" ref="treeRef" @node-click="handleTreeNodeClick"
             highlight-current="true" /> -->
    </div>

    <!-- 添加表单控件 -->
    <el-form :model="menuForm" label-width="120px" style="margin-top: 10px;">
        <el-form-item label="菜单名称">
            <el-input v-model="menuForm.label" style="width: 50%" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="subMenuFormClick">保存</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>

    <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
        <span>是否修改节点位置</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="nodePosChanged">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

const treeRef = ref()
const dialogVisible = ref(false)

const props = reactive({
    id: 'id',
    label: 'label',
    children: 'children'
})

var posUpdateType = ''

const menus = ref([])
const menuForm = reactive({
    label: ''
})

function handleTreeNodeClick(node) {
    console.log(node)
    nowPID = node.id
    updateOrSaveUrl = 'http://localhost:8081/saveMenu'
    menuForm.id = 0
}

var nowPID = 0
var updateOrSaveUrl = ''
var updateData = {

}

function dragEnd(draggingNode, dropNode, dropType) {
    console.log("dradding" + draggingNode.label + "(" + draggingNode.data.id + ")")
    if (draggingNode != null && dropNode != null) {
        if (dropType != null) {
            if (draggingNode.data.id != dropNode.data.id && draggingNode.parent.data.id != draggingNode.parent.data.id) {
                console.log("!!!")
                updateData.id = draggingNode.data.id
                posUpdateType = dropType
                if (posUpdateType == 'inner') {
                    updateData.pid = dropNode.data.id
                } else {
                    updateData.pid = dropNode.parent.data.id
                }
                dialogVisible.value = true
            }
        }
    }

    loadMenuTree()
}

function allowDrag(node) {
    return node.parent.data != null
}

function nodePosChanged() {
    if (updateData.id) {
        console.log(posUpdateType)
        if (posUpdateType == 'inner') {

        } else {

        }
    }
    dialogVisible.value = false
}

function handleClose() {
    console.log("close")
    dialogVisible.value = false
    loadMenuTree()

}

function getMenus() {
    axios.get("http://localhost:8081/allMenus").then((resp) => {
        console.log(resp.data)
        menus.value = resp.data
    }).catch((error) => {
        console.log(error)
    })
}

function subMenuFormClick() {
    if (nowPID == 0) {
        ElMessage.error("请先选择一个节点")
        return
    }
    menuForm.pid = nowPID;

    axios.post(updateOrSaveUrl, menuForm)
        .then((resp) => {
            if (resp.data.code == 200) {
                //重新加载tree控件
                loadMenuTree() //重新渲染树
                ElMessage({ message: resp.data.msg, type: 'success' });
            } else {
                ElMessage.error(resp.data.msg)
            }
        })
        .catch((error) => {
            console.log(error);
        });
}

function handleEdit(node, data) {
    menuForm.label = data.label
    menuForm.id = data.id
    nowPID = node.parent.data.id
    updateOrSaveUrl = "http://localhost:8081/updateMenu"
}

function handleDelete(node, data) {
    if (data.children.length == 0) {
        let mid = data.id;
        //该节点是叶子节点可以删除
        axios.get("http://localhost:8081/deleteMenus/" + mid)
            .then((resp) => {
                if (resp.data.code == 200) {
                    //重新加载tree控件
                    loadMenuTree() //重新渲染树
                    ElMessage({ message: resp.data.msg, type: 'success' });
                } else {
                    ElMessage.error(resp.data.msg)
                }
            })
    } else {
        ElMessage.error("无法删除带有子节点的节点!")
    }
}

function loadMenuTree() {
    getMenus()
}

onMounted(() => {
    getMenus()
})
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>